<!-- 收款图表 -->
<template>
  <el-row class="content" style="width: 100%; height: 100%;" justify="center">
    <SKBlockBar :x-axis="receiveAmountForScbk.xAxis" :data="receiveAmountForScbk.value" style="width: 25%;" />
    <div class="select">
      <span>生产板块</span>
      <el-select v-model="selectScbk" placeholder="请选择" size="small" style="width: 60px;" @change="handleOnScbkChange">
        <el-option v-for="item in scbkOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <SKMoneyCircl :scbk="selectScbk" :data="amountForYwlxByScbk" style="width: 30%;" />
    <div class="select">
      <span>业务类型</span>
      <el-select v-model="selectYwlx" placeholder="请选择" size="small" style="width: 60px;">
        <el-option v-for="item in ywlxOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <SKBusinessBar :data="monthAmountForYelxByScbk" style="width: 35%;" />
  </el-row>
</template>

<script setup>
import SKBlockBar from './SKBlockBar.vue';
import SKMoneyCircl from './SKMoneyCircl.vue';
import SKBusinessBar from './SKBusinessBar.vue';
import { getUniqueYwlxByScbk, getUniqueScbk, getReceiveAmountForScbk, getMonthProductionAmountForYelxByScbk, getMonthReceiveAmountForYelxByScbk, getProductionAmountForYelxByScbk, getProductionAmountForScbk, getReceiveAmountForYelxByScbk } from '@/api/screenApi';
import { ref, onMounted, reactive } from 'vue';

const props = defineProps({ year: Number, block: String });

const selectScbk = ref('');
const scbkOptions = ref([]);

const handleOnScbkChange = () => {
  if (props.block === 'shoukuan') {
    loadReceiveAmountForYelxByScbk().then(() => {
      loadMonthReceiveAmountForYelxByScbk();
    });
  } else {
    loadProductionAmountForYelxByScbk().then(() => {
      loadMonthReceiveAmountForYelxByScbk();
    });;
  }
}

// 获取各生产板块下的收款金额
const receiveAmountForScbk = reactive({});

const loadAmountForScbk = (res) => {
  if (Array.isArray(res.data.data)) {
    // scbkOptions.value = res.data.data.map(item => ({ label: item.key, value: item.key }));
    // selectScbk.value = scbkOptions.value[0].value;
    receiveAmountForScbk.xAxis = res.data.data.map(item => item.key);
    receiveAmountForScbk.value = res.data.data.map(item => item.value);
  }

}

// 收款：获取各生产板块下的收款金额
const loadReceiveAmountForScbk = async () => {

  await getUniqueScbk(props.year).then(res => {
    scbkOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectScbk.value = '全部';
  })
  await getReceiveAmountForScbk(props.year).then(res => {
    loadAmountForScbk(res);
  })
}

// 产值：获取获取各生产板块下的产值
const loadProductionAmountForScbk = async () => {
  await getUniqueScbk(props.year).then(res => {
    scbkOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectScbk.value = '全部';
  })
  await getProductionAmountForScbk(props.year).then(res => {
    loadAmountForScbk(res);
  })
}

// 获取指定生产板块下金额
const amountForYwlxByScbk = ref([]);
const selectYwlx = ref('');
const ywlxOptions = ref([]);

const loadAmountForScbkByYwlx = async (res) => {

  if (Array.isArray(res.data.data)) {
    // ywlxOptions.value = res.data.data.map(item => ({ label: item.key, value: item.key }));
    // selectYwlx.value = ywlxOptions.value[0].value;
    amountForYwlxByScbk.value = res.data.data.map(item => ({ name: item.key, value: item.value }));
  }

}
// 收款
const loadReceiveAmountForYelxByScbk = async () => {
  await getUniqueYwlxByScbk(props.year, selectScbk.value).then(res => {
    ywlxOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectYwlx.value = '全部';
  })
  await getReceiveAmountForYelxByScbk(props.year, selectScbk.value).then(res => {
    loadAmountForScbkByYwlx(res);
  })
}
// 产值
const loadProductionAmountForYelxByScbk = async () => {
  await getUniqueYwlxByScbk(props.year, selectScbk.value).then(res => {
    ywlxOptions.value = res.data.data.map(item => ({ value: item, label: item }));
    selectYwlx.value = '全部';
  })
  await getProductionAmountForYelxByScbk(props.year, selectScbk.value).then(res => {
    loadAmountForScbkByYwlx(res);
  })
}

// 获取指定生产板块、业务类型下每月的收款金额
const monthAmountForYelxByScbk = ref([]);

const loadMonthReceiveAmountForYelxByScbk = () => {
  getMonthReceiveAmountForYelxByScbk(props.year, selectScbk.value, selectYwlx.value).then(res => {
    if (Array.isArray(res.data.data)) {
      monthAmountForYelxByScbk.value = res.data.data.map(item => item.value);
    }
  })
}

const loadMonthProductionAmountForYelxByScbk = () => {
  getMonthProductionAmountForYelxByScbk(props.year, selectScbk.value, selectYwlx.value).then(res => {
    if (Array.isArray(res.data.data)) {
      monthAmountForYelxByScbk.value = res.data.data.map(item => item.value);
    }
  })
}

const loadReceiveData = async () => {
  await loadReceiveAmountForScbk();
  await loadReceiveAmountForYelxByScbk();
  loadMonthReceiveAmountForYelxByScbk();
}

const loadProductionData = async () => {
  await loadProductionAmountForScbk();
  await loadProductionAmountForYelxByScbk();
  loadMonthProductionAmountForYelxByScbk();
}

onMounted(() => {
  // console.log(props);
  if (props.block === 'shoukuan') {
    loadReceiveData();
  } else {
    loadProductionData();
  }
})
</script>

<style scoped>
.select {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
</style>
